<template>
  <div class="common-container">
    <div class="header">
      <div class="header_left" style="display: flex; align-items: center">
        <el-input placeholder="请输入机构名称" v-model="searchVal" style="width: 200px; margin-right: 15px" size="small"
          maxlength="20" clearable @clear="clearNickname" class="el_input">
          <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchClick">
          </el-button>
        </el-input>
      </div>
      <div class="header_right">
        <!-- <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="onAdd"
        >
          新增
        </el-button>  -->
      </div>
    </div>
    <div class="content">
      <!-- lazy :load="load" -->
      <el-table :data="tableData" height="calc(100% - 0px)" class="table" :header-cell-style="headerStyle" row-key="id"
       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="refreshTable"
        :default-expand-all="false">
        <el-table-column align="left" prop="orgName" label="机构名称" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.orgName }}</span>
            <!-- <i
            v-if="scope.row.type==3"
              v-permission="{ action: 'enterpriseOrg:add' }"
              class="el-icon-circle-plus-outline"
              @click="onAdd(scope.row)"
            ></i> -->
            <i v-permission="{ action: 'enterpriseOrg:add' }" class="el-icon-circle-plus-outline"
              @click="onAdd(scope.row)"></i>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="type" label="机构属性" min-width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">运营机构</span>
            <span v-else-if="scope.row.type == 2">基础组织</span>
            <span v-else-if="scope.row.type == 3">行政区划</span>
            <span v-else-if="scope.row.type == 4">业主单位</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column align="center" prop="description" label="描述" min-width="120">
        </el-table-column> -->
        <el-table-column align="center" prop="createTime" label="创建时间" min-width="120">
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="80">
          <template slot-scope="scope">
            <!-- <el-tooltip class="item" effect="dark" content="详情" placement="bottom"
              v-permission="{ action: 'enterpriseOrg:details' }">
              <i @click="onDetail(scope.row)" class="iconfont xiangqing tableBtnIcon"></i>
            </el-tooltip> -->
            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom"
              v-permission="{ action: 'enterpriseOrg:edit' }">
              <i @click="onEdit(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="bottom"
              v-permission="{ action: 'enterpriseOrg:delete' }" >
              <i @click="onDel(scope.row)" class="iconfont shanchu tableBtnIcon"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Add ref="refAddRegion" :fixedPjtInfo="fixedPjtInfo" :getLocationInfo="getLocationInfo"
      :getAddressflag="getAddressflag" />
    <Edit ref="refEditRegion" :editOrgInfo="editOrgInfo" :getLocationInfo="getLocationInfo"
      :getAddressflag="getAddressflag" />
    <detail ref="refdetail" :editOrgInfo="editOrgInfo"></detail>
  </div>
</template>

<script>
import Add from "./components/orgAdd.vue";
import Edit from "./components/edit.vue";
import detail from "./components/detail.vue";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqOrgDel, reqRegionLevel ,reqOrgList} from "@/api/api";
import { handleTree ,transTree} from "@utils/trans-tree";
import { mapState, mapMutations } from "vuex";
import mixinGetAddress from "./components/mixins/getAddress.js";

export default {
  name: "",
  components: {
    Add,
    Edit,
    Pagination,
    detail,
  },
  mixins: [tableStyleMixin, mixinGetAddress],
  data() {
    return {
      loadingSearch: false, //查询按钮loading
      configKey: "",
      tableData: [],
      editOrgInfo: {},
      fixedPjtInfo: {},
      searchVal: "",
      editInfo: {},
    };
  },
  mounted() { },
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  methods: {
    ...mapMutations(["selectMenu"]),
      // 懒加载子节点数据
      load(tree, treeNode, resolve) {
      // console.log(tree);
      reqOrgList( {
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        orgName: "",
        parentId: tree.id,
          type:"1,2,3"
      }).then((res) => {
        // console.log(res.data.rows);
        res.data.rows.forEach((item, index) => {
          // 等于1有下级
          if (item.hasChildren == 1) {
            item.hasChildren = true;
          }
        });
        resolve(res.data.rows);
      });
    },
    // 固定父id新增
    onAdd(row) {
      // this.$refs.refAddRegion.closeDialog2(); //防止出现表单验证
      // this.$refs.refAddRegion.RegionList();
      this.fixedPjtInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refAddRegion.dialogVisible = true;
    },
    // 清空
    clearNickname() {
      this.page = 1;
      this.limit = 10;
      this.Region();
    },
    //查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.Region();
      this.loadingSearch = false;
    },
    // onDetail(item) {
    //   this.editOrgInfo = JSON.parse(JSON.stringify(item));
    //   this.$refs.refdetail.dialogVisible = true;
    // },
    onEdit(item) {
      this.editOrgInfo = JSON.parse(JSON.stringify(item));
      this.$refs.refEditRegion.dialogVisible = true;
      // this.$refs.refEditRegion.RegionList();
      // this.$refs.refEditRegion.cityArr();
      // this.$refs.refEditRegion.areaArr();
      // this.$refs.refEditRegion.RegionLevelList();
      // this.$refs.refEditRegion.communitylList();
    },
    onDel(row) {
      this.$confirm("此操作将永久删除该组织机构, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqOrgDel(row.id);
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("删除组织机构成功");
          this.Region();
          // this.loadChildren2(row.parentId); //父级id
        })
        .catch(() => { });
    },

    // 重新渲染表格
    // async loadChildren2(id) {
    //   let res = await reqOrgList(1, 50, {
    //     userId: this.user.userId,
    //     roleName: this.user.roleName,
    //     tenantId: this.user.tenantId,
    //     orgName: this.searchVal,
    //     parentId: id,
    //        type:"1,2,3"
    //   });
    //   if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //   let { rows } = res.data;
    //   this.$set(this.$refs.refreshTable.store.states.lazyTreeNodeMap, id, rows);
    // },

    // 获取列表
    async Region() {
      let res = await reqOrgList( {
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        orgName: this.searchVal,
        type:"1,2,3"
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { rows } = res.data;
      this.tableData = transTree(rows);//后端接口返回全部数据
      // this.tableData = handleTree(rows, "id", "hasChildren", "parentId");
      //   this.tableData.forEach((item, index) => {
      //     if (item.hasChildren == 1) {
      //       item.hasChildren = true;
      //     } else {
      //       item.hasChildren = false;
      //     }
      //   });
    },
  },
  created() {
    this.Region();
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

.common-container .content {
  height: calc(100% - 65px);
}

// +号
.el-icon-circle-plus-outline {
  // float: right;
  margin-left: 5px;
  font-size: 14px;
  color: @primaryThemeTxtColor;
  cursor: pointer;

  // margin-bottom: 3px;
  &:hover {
    opacity: 0.6;
  }
}

::v-deep .el_button.el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}

//  按钮
::v-deep .el-button--medium {
  background: #7367f0;
  color: #fff;
  border: none;
  //  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, background 0s, border 0s, -webkit-box-shadow .15s ease-in-out;

  &:hover {
    box-shadow: 0px 0px 16px 0px ~"rgb(115 103 240 / 50%)";
    transition: box-shadow 0.3s;
  }
}

::v-deep .el-button--primary {
  border-color: #7367f0 !important;
  background-color: #7367f0 !important;
}

// 折叠箭头
::v-deep .el-icon-arrow-right:before {
  content: "\e791";
  // position: relative;
  font-size: 18px;
  // top: 4px;
  color: @primaryThemeTxtColor;
}

::v-deep .el-table__expand-icon--expanded {
  // top: 3px;
  // left: 8px;
}

::v-deep .el-table tr td:first-of-type .cell {
  display: flex;
  align-items: center;
}
</style>
